<route>
{
    meta: {
        title: '实验室信息管理'
    }
}
</route>

<template>

  <div class="app-container"
       style="margin-left: 20px; margin-right: 20px;margin-top: 35px;">
    <!-- style="margin-left: 20px;margin-top: 20px;" -->

    <el-row>
      <el-col :span="24">
        <el-form :model="queryParams"
                 ref="queryFormRef"
                 :inline="true"
                 label-width="90px">
          <el-form-item label="实验室名称"
                        prop="lab_site">
            <el-input v-model="queryParams.lab_site"
                      placeholder="请输入实验室名称"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="实验室类型"
                        prop="lab_type">
            <el-input v-model="queryParams.lab_type"
                      placeholder="请输入实验室类型"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       :icon="Search"
                       @click="handleQuery"
                       round
                       plain>搜索</el-button>
            <el-button :icon="Refresh"
                       @click="resetQuery"
                       round
                       plain>重置</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>

    <el-divider>
      <el-icon>
        <star-filled />
      </el-icon>
    </el-divider>
    <el-row>
      <el-col :span="1">
        <el-button type="primary"
                   plain
                   :icon="Plus"
                   @click="handleAdd">新增
        </el-button>

      </el-col>

      <el-table :data="labList">
        <el-table-column fixed=""
                         type="index"
                         label="序号"
                         :index="pageNum" />
        <el-table-column prop="lab_site"
                         label="实验室名称" />

        <el-table-column label="实验室类型"
                         prop="lab_type" />

        <el-table-column prop="lab_size"
                         label="实验室容量" />

        <el-table-column prop="lab_describe"
                         label="实验室描述" />
        <el-table-column prop="use_flag"
                         label="使用标识">
          <template #default="scope">

            <el-switch v-model="scope.row.use_flag"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       :active-value=" '1' "
                       :inactive-value=" '0' "
                       @change="updateLabFlag($event,scope.row)" />
          </template>

        </el-table-column>

        <el-table-column fixed="right"
                         label="操作"
                         width="120">
          <template #default="scope">
            <el-button type="text"
                       size="small"
                       @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small"
                       type="danger"
                       @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="page.total > 0"
                  :total="page.total"
                  v-model:page="page.pageNum"
                  v-model:limit="page.pageSize"
                  @pagination="getList" />
    </el-row>
    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title"
               v-model="operForm.open"
               width="500px"
               append-to-body>
      <el-form :model="operForm.form"
               ref="queryFormRef"
               label-width="100px">
        <el-form-item label="实验室名称"
                      prop="lab_site">
          <el-input v-model="operForm.form.lab_site"
                    placeholder="请输入实验室名称" />
        </el-form-item>
        <el-form-item label="实验室类型"
                      prop="lab_type">
          <el-select v-model="operForm.form.lab_type"
                     placeholder="请选择实验室类型">
            <el-option v-for="item in operForm.options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="使用标识"
                      prop="use_flag">
          <el-input v-model="operForm.form.use_flag"
                    placeholder="使用标识" />
        </el-form-item> -->
        <el-form-item label="实验室容量"
                      prop="lab_size">
          <el-input v-model="operForm.form.lab_size"
                    placeholder="请输入实验室容量" />

        </el-form-item>
        <el-form-item label="实验室描述"
                      prop="lab_describe">
          <el-input v-model="operForm.form.lab_describe"
                    placeholder="请输入实验室描述" />

        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>

</template>

<script lang="ts" setup>
import {
  StarFilled,
  Edit,
  Share,
  Delete,
  Search,
  Upload,
  Refresh,
  Plus,
  User,
} from '@element-plus/icons-vue'
import {
  defineComponent,
  onMounted,
  reactive,
  toRef,
  ref,
  computed,
  toRefs,
  getCurrentInstance,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
const labList = ref([])
const loading = ref(true)
const queryFormRef = ref(null)
const open = ref(false)
const title = ref('')
const pageNum = ref(1)

/**查询条件 */
const queryParams = ref({
  lab_site: undefined,
  lab_type: undefined,
})
const page = ref({
  total: 1,
  currentpage: 1,
  pagesize: 10,
  pageNum: 1,
})
/**获取表单数据*/
const getList = () => {
  loading.value = true
  console.log(queryParams.value)
  api.post('lab/selectLab/'+page.value.pageNum, queryParams.value).then((res) => {
    page.value.total = res.data.total
    page.value.pagesize = res.data.pageSize
    loading.value = false
    labList.value = res.data.list
    console.log('tableData=', labList.value)
  })
}
/**删除按钮操作*/
const handleDelete = (row) => {
  const id = row.id
  console.log(id)
  const username = row.account
  ElMessageBox.confirm(
    '是否确认删除用户编号为"' + username + '"的数据项?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(function () {
      return api.post('lab/deleteLab', { id }).then((res) => {})
    })
    .then(() => {
      getList()
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}

/** 搜索按钮操作 */
function handleQuery() {
  pageNum.value = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/**增加或修改表单数据 */
const operForm = ref({
  open: false,
  form: {
    id: undefined,
    lab_type: undefined,
    lab_site: undefined,
    lab_size: undefined,
    lab_describe: undefined,
    use_flag: undefined,
  },
  options: [
    {
      value: '教学',
      label: '教学',
    },
    {
      value: '个人学习',
      label: '个人学习',
    },
  ],
})
/** 重置新增的表单以及其他数据  */
function reset() {
  operForm.value.form = {
    id: undefined,
    lab_type: undefined,
    lab_site: undefined,
    lab_size: undefined,
    lab_describe: undefined,
    use_flag: 0,
  }
  //重置搜索框
  queryFormRef.value.resetFields()
}
/**
 * 新增
 */
const handleAdd = () => {
  reset()
  operForm.value.open = true
  title.value = '添加实验室'
}

/**编辑按钮操作 */
const handleEdit = (row) => {
  reset()
  const id = row.id
  console.log(id)
  api.post('lab/selectLabById', { id }).then((res) => {
    operForm.value.form = res.data
    operForm.value.open = true
    console.log('tableData=', operForm.value.form)
  })
}

/** 提交按钮 */
function submitForm() {
  console.log(operForm.value.form.id)
  if (operForm.value.form.id != undefined) {
    api.post('lab/updateLab', operForm.value.form).then((res) => {
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      operForm.value.open = false
      getList()
    })
  } else {
    api.post('lab/addLab', operForm.value.form).then((res) => {
      ElMessage({
        message: '新增成功',
        type: 'success',
      })
      console.log(res.data)
      operForm.value.open = false
      getList()
    })
  }
}

/** 取消按钮 */
function cancel(row) {
  open.value = false
  reset()
}

/**修改实验室是否使用标志 */
const updateLabFlag = (dd, row) => {
  console.log(dd)
  console.log(row)
  api.post('lab/updateLab', row).then((res) => {})
}
getList()
</script>
